<template>
  <div id="container">
    <el-container >
      <el-header style="padding: 0; height: 115px">
        <div id="logo">
          <img style="border-radius: 20px; margin-left: 10px; background: white" src="../images/logo.png" />
          <h1 style="margin-left: 40px">疫情防控数据填报系统</h1>
        </div>
        <el-dropdown @command="handleCommand">
          <span style="background:rgb(68, 68, 68);font-size: larger " class="el-dropdown-link">
            用户中心<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-edit" command="a"
              >修改密码</el-dropdown-item>
            <el-dropdown-item icon="el-icon-s-fold" command="b">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
    </el-container>
    <el-menu
      :default-active="path"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <template v-for="(item,index) in nav_menu_data">
        <el-menu-item :index = "item.path" :key = "index">{{item.title}}</el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      path: "",
      nav_menu_data: [
        {
          title: "首页",
          path: "/add/index",
        },
        {
          title: "添加外来人员",
          path: "/add/maneage",
        },
        {
          title:'填报省级疫情数据',
          path:'/add/addprovincedata'
        },
        {
          title:'填报国家疫情数据',
          path:'/add/addcountrydata'
        }
      ],
    };
  },
  methods: {
    handleCommand(command) {
      if (command === "a") {
        alert("修改密码");
        return;
      } else {
         this.$message({
          // message:`${localStorage.getItem('username')}已登出`,
           message:"管理员退出填报系统",
          type:'success',
        })
      localStorage.removeItem('token')
      localStorage.removeItem('username')
        this.$router.push('/add/login')
      }
    },
    onRouteChanged() {
      let that = this;
      that.path = that.$route.path;
    },
  },
  created() {
    this.onRouteChanged();
    // this.$message({
    //   // message:`${localStorage.getItem('username')}欢迎回来`,
    //   message:"欢迎回来",
    //   type:'success'
    // })
  },
  watch: {
    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
    $route: "onRouteChanged",
  },
};
</script>

<style scoped>
div#container {
  margin: 0;

}
div#logo {
  margin-top: 2px;
  margin-bottom: 2px;
  width: 1000px;
  height: 35px;
  display: flex;
  margin-left: 5px;
  font-size: 20px;
  font-weight: bolder;
  /*color: #0859a6;*/
  /*color: aliceblue;*/
  align-items: center;
}
img {
  /*border-radius: 15px;*/
  width: 438px;
  height: 115px;
}
.el-header {
  /*background: #00b0e8;*/
  background-color: rgb(68, 68, 68);
  text-align: center;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*border-radius: 7px 7px 0 0;*/
  height: 35px;
}
.el-menu-item{
  font-size: larger;
}
</style>